<template>
  <div class="my-filter">
    <div class="content">
      <div class="header">
        <img src="/src/assets/icons/menu-screen.png">
        <span>筛选</span>
        <mt-button type="default" size="small" :plain="true" class="plain-btn" @click.native="$router.push({name: 'ActivityDel'})">
          <span>已删除活动</span>
          <img src="/src/assets/icons/circle-go.png" class="right-img">
        </mt-button>
      </div>
      <div class="title">时间</div>
      <div class="square">
        <div class="s-item" 
          v-for="(v, k) in weekdays" :key="k" 
          :class="{active: isActive === v.week}" 
          @click="tabSelect(v.week)">
          <div class="top">{{v.text}}</div>
          <div class="bottom">{{v.day}}</div>
        </div>
      </div>
      <div class="title">
        银行
        <mt-button type="default" size="small" :plain="true" class="plain-btn" @click="checkAllBanks">全选</mt-button>
      </div>
      <div class="oblong">
        <div class="s-item" @click="chooseMyBank">
          <span class="text">我的银行</span>
        </div>
        <div class="s-item transparent" @click="openEditBank">
          <img src="/src/assets/icons/set.png">
          <span class="text">管理我的银行</span>
        </div>
        <div class="s-item light"
          v-for="(name, id) in bankList" :key="id" 
          :class="{active: inArray(bankActive, id) !== false}" 
          @click="bankSelect(id)">
          <span class="text">{{name}}</span>
        </div>
        <div class="s-item white" v-if="Object.keys(bankList).length % 3 === 2">
          <span class="text"></span>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <mt-button type="default" :plain="true" class="cancel" @click="closePopup">取消</mt-button>
      <mt-button type="primary" class="confirm" @click="confirm">确定</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BankFilter',
  props: ['weekdays', 'bankList'],
  data () {
    return {
      isActive: 0,
      bankActive: this.$route.query.searchBanks || [],
      userBanks: {}
    }
  },
  methods: {
    openEditBank () {
      this.$emit('openBankPopup')
    },
    closePopup () {
      this.$emit('childClosePopup', false)
    },
    confirm () {
      if (Number(this.$route.query.actS) === 2) {
        this.$emit('optCheck', 'allWeekday', this.isActive)
      } else {
        this.$emit('optCheck', 'myWeekday', this.isActive)
      }
      this.$emit('optCheck', 'searchBanks', this.bankActive)
      this.$emit('childClosePopup', true)
    },
    tabSelect (week) {
      this.isActive = week
    },
    bankSelect (val) {
      let index = this.inArray(this.bankActive, val)
      if (index !== false) {
        this.bankActive.splice(index, 1)
      } else {
        this.bankActive.push(val)
      }
    },
    checkAllBanks () {
      if (Object.keys(this.bankList).length !== this.bankActive.length) {
        for (let id in this.bankList) {
          if (this.inArray(this.bankActive, id) === false) {
            this.bankActive.push(id)
          }
        }
      } else {
        this.bankActive = []
      }
    },
    chooseMyBank () {
      let num = 0
      for (let j = 0; j < this.bankActive.length; j++) {
        for (const i in this.userBanks) {
          if (this.userBanks.hasOwnProperty(i) && Number(this.bankActive[j]) === Number(i)) {
            num++
          }
        }
      }
      if (num === Object.keys(this.userBanks).length && this.bankActive.length === Object.keys(this.userBanks).length) {
        this.bankActive = []
      } else {
        this.bankActive = Object.keys(this.userBanks)
      }
    },
    getUserBanks () {
      this.$post('/vue/bank/get_user_bank', '').then(data => {
        this.userBanks = data
        if (this.$route.query.searchBanks === undefined) {
          this.chooseMyBank()
        }
      })
    },
    inArray (arr, val) {
      for (let i = 0; i < arr.length; i++) {
        if (val === arr[i]) {
          return i
        }
      }
      return false
    }
  },
  mounted () {
    this.getUserBanks()
  }
}
</script>
<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .my-filter {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .content {
      padding: 12px 12px 58px;
      height: calc(~'100% - 58px');
      overflow-x: hidden;
      overflow-y: scroll;
      .header {
        color: #7c7c7c;
        text-align: left;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
        }
        span {
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .title {
        color: #7c7c7c;
        margin: 24px 0 8px 0;
        font-size: 15px;
        line-height: 24px;
        font-weight: bold;
        text-align: left;
      }
      .square {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: 0;
        .s-item {
          display: inline-block;
          padding: 6px 0px;
          /* box-sizing: border-box;
          width: 56px;
          height: 56px; */
          background-color: #f0f4f7;
          border-radius: 4px;
          flex: 0 0 56px;
          margin-right: 8px;
          margin-bottom: 12px;
          .top {
            color: #7c7c7c;
            font-size: 13px;
            line-height: 24px;
            font-weight: normal;
          }
          .bottom {
            color: #a9a9a9;
            font-size: 12px;
            line-height: 20px;
          }
          &.active {
            background-color: rgba(108, 184, 222, 0.3);
            .top {
              color: #286496;
            }
            .bottom {
              color: #286496;
            }
          }
        }
      }
      .plain-btn {
        float: right;
        width: auto;
        height: 24px;
        border-color: #e2e2e2;
        font-size: 12px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 16px;
        color: #a9a9a9;
        position: relative;
        box-sizing: border-box;
        .mint-button-text {
          display: block;
          line-height: 0;
          span {
            margin-right: 12px;
          }
          .right-img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 22px;
            height: 22px;
            margin: 0;
            padding: 0;
          }
        }
      }
      .oblong {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: 0;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        .s-item {
          height: 24px;
          background-color: #f0f4f7;
          border-radius: 4px;
          flex: 0 0 31.03%;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;
          &.light .text {
            font-weight: normal;
          }
          &.white {
            background-color: #FFF;
          }
          &.transparent {
            flex: 0 0 50%;
            background-color: transparent;
            align-items: flex-end;
            align-content: flex-end;
            justify-content: flex-end;
            img {
              width: 24px;
              height: 24px;
              vertical-align: middle;
            }
            .text {
              font-size: 12px;
              font-weight: 300;
              color: @c-169;
              vertical-align: middle;
            }
          }
          .text {
            color: #7c7c7c;
            font-size: 13px;
            line-height: 24px;
            font-weight: bold;
          }
          &.active {
            background-color: rgba(108, 184, 222, 0.3);
            .text {
              color: #286496;
            }
          }
        }
      }
    }
    .btn-group {
      width: 92%;
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 8px 4%;
      background-color: #FFF;
      border-top: 1px solid rgb(226, 226, 226);
      display: flex;
      justify-content: space-between;
      .cancel {
        flex: 1;
        font-size: 13px;
        font-weight: bold;
        border-radius: 8px;
        border-color: rgb(226, 226, 226);
        color: rgb(124, 124, 124);
      }
      .confirm {
        flex: 2;
        font-size: 13px;
        border-radius: 8px;
        margin-left: 12px;
        background-color: rgb(108, 184, 222);
      }
    }
  }
</style>